@use "../../default" as theme;
@use "sass:math";
@keyframes pf-Spin-tail-rotate{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}
@keyframes pf-Spin-dot-rotate{
	0%{transform:rotate(0deg);}
	45%{transform:rotate(270deg);animation-timing-function:linear;}
	100%{transform:rotate(360deg);animation-timing-function:linear;}
}
.pf-Spin{
	position:relative;
	display:inline-block;
	width:1em;
	height:1em;
	font-size: theme.$Spin-size;
	color: theme.$Spin-color;
	vertical-align: theme.$vertical-align;
	overflow:hidden;
	&.pf--type-tail{
		>div{
			display:flex;
			position:absolute;
			width:100%;
			height:100%;
			animation:pf-Spin-tail-rotate 1s infinite linear;
		}
		svg{
			fill:none;
			fill-rule:evenodd;
			stroke-width:1.2;
			stroke-linecap:round;
		}
	}
	&.pf--type-circle{
		>div{
			display:flex;
			position:absolute;
			width:100%;
			height:100%;
			animation:pf-Spin-tail-rotate 1s infinite linear;
		}
		svg{
			fill:none;
			fill-rule:evenodd;
			stroke-width:1.5;
			stroke:currentColor;
			stroke-linecap:round;
		}
		circle{
			stroke-opacity:0.2;
		}
	}
	&.pf--type-dot{
		$-dot-size:math.div(1em * 3,23);
		$-duration:1.8s;
		>div{
			position:absolute;
			top:0;
			left:calc(50% - #{math.div($-dot-size,2)});
			width:$-dot-size;
			height:$-dot-size;
			border-radius:50%;
			background:currentColor;
			transform-origin:50% 0.5em;
			animation:pf-Spin-dot-rotate $-duration infinite cubic-bezier(0.7,0.2,0.5,0.8);
			@for $-i from 1 through 5 {
				&:nth-child(#{$-i}){
					animation-delay:($-i - 1)*$-duration*0.125 - $-duration;
				}
			}
		}
	}
}